import React, { useState } from 'react';
import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
import { Modal } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import './index.less';

export default (props: { visible: any; $visible: any;isFullScreen: boolean,$isFullScreen,  children, title: string}) => {
  const { visible, $visible, isFullScreen, $isFullScreen, children, title } = props;
  const draggleRef = React.createRef();
  const [bounds, $bounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });

  const onStart = (event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement;
    const targetRect = draggleRef?.current?.getBoundingClientRect();
    $bounds({
      left: -targetRect?.left + uiData?.x,
      right: clientWidth - (targetRect?.right - uiData?.x),
      top: -targetRect?.top + uiData?.y,
      bottom: clientHeight - (targetRect?.bottom - uiData?.y),
    });
  };

  const changeModal = (e: { stopPropagation: () => void; }) => {
    e.stopPropagation();
    $isFullScreen(!isFullScreen);
  };

  return (
    <Modal
      className={`commonModal ${isFullScreen ? 'fullModal' : ''}`}
      title={title}
      visible={visible}
      width={1500}
      // getContainer={() => document.getElementsByClassName('dn-main-panel')[0]}
      destroyOnClose
      onCancel={() => $visible(false)}
      footer={null}
      closeIcon={
        <div>
          <InbizIcon
            onClick={(e: any) => changeModal(e)}
            type={isFullScreen ? 'icon-huanyuan' : 'icon-ic-zuidahua'}
            style={{ fontSize: 24, marginRight: 10 }}
          />
          <InbizIcon onClick={() => $visible(false)} type="icon-ic-close-bold" style={{ fontSize: 24 }} />
        </div>
      }
      bodyStyle={{
        height: isFullScreen ? 'calc(100vh - 64px)' : 'calc(100vh - 200px)',
        overflow: 'auto',
        padding: '0px 20px 0',
      }}
      modalRender={(modal) => (
        <Draggable
          disabled={false}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div>{modal}</div>
        </Draggable>
      )}
    >
      {children}
    </Modal>
  );
};
